<template>
	<view class="MembershipCode bigestBox">
		<view class="lishang boxSize_bb flexDeCo">
			<view class="ls_top flex_jcsb">
				<view class="lst_left">{{ nickname }}</view>
				<view class="lst_right">{{ userId }}</view>
			</view>
			<view class="ls_bottom">尊贵会员</view>

		</view>
		<view class="QRCode boxSize_bb flexDeCo" style="margin: 0 30rpx; background: #FFFFFF; 
			justify-content: center; align-items: center; padding:120rpx 138rpx;">
			<image src="/static/images/MembershipCode/ORCode.png" mode="" style="width: 300rpx;height: 300rpx;"></image>
			<view class="qrc_text" style="text-align: center;margin-top: 20rpx;">
				在参与活动的酒店和餐厅出示二维码，赚取或兑换积分
			</view>
		</view>
		<view class="vip flexDeCo boxSize_bb">
			<view class="box" v-for="(item, index) in typeList" :key="index">
				<view class="vip_top flex_jcsb">
					<view class="vt_one flex">
						<image src="/static/images/MembershipCode/vipReplace.png" mode=""
							style="width: 56rpx; height: 56rpx;">
						</image>
						<view class="vt_two flexDeCo">
							<view class="vtt_top">{{ item.name }}</view>
							<view class="vtt_bottom">{{ item.memberDesc }}</view>
						</view>
					</view>
					<template v-if="item.isExpanded">
						<image src="/static/images/MembershipCode/hide.png" mode="" class="vtt_three"
							style="width: 32rpx;height: 34rpx;" @click="toggleItem(item)"></image>
					</template>
					<template v-else>
						<image src="/static/images/MembershipCode/show.png" mode="" class="vtt_three"
							style="width: 32rpx;height: 34rpx;" @click="toggleItem(item)">
						</image>
					</template>
				</view>
				<view 
				class="vip_bottom flexDeCo" 
				style="margin-top: 26rpx;" 
				v-if="item.isExpanded"
				>
					<view 
            v-for="(intrest, index) in item.interestList"
            :key="index"
					>{{ intrest }}</view>
				</view>
			</view>

			<!-- <uni-collapse class="collapse-box" accordion ref="collapse" v-model="index" @change="change">
				<uni-collapse-item class="collapse-item" v-for="(item, index) in typeList" :key="index">
					<template v-slot:title>
						<image src="/static/images/NangCahng/MembershipLevel.png" mode=""
							style="width: 56rpx; height: 56rpx;">
						</image>
						<span class="main-title">
							{{ item.name }}
						</span>
						<view class="sub-title">
							{{ item.memberDesc }}
						</view>
					</template>
				</uni-collapse-item>
			</uni-collapse> -->
		</view>

	</view>
</template>

<script>
	import {
		memberList
	} from '../../api/member';
	export default {
		data() {
			return {
				typeList: [],
				userInfo: {},
			};
		},
		onLoad(options) {
			if (!uni.getStorageSync("userToken")) {
				this.isLogin()
			} else {
				this.userInfo = uni.getStorageSync("userInfo");
			}
		},
		computed: {
			userId() {
				return this.userInfo.id
			},
			nickname() {
				return this.userInfo.nickname
			},
		},
		mounted() {
			//this.$refs.MembershipRatePop.open('center');
			console.log("typeList mounted")
			memberList().then((res) => {
				console.log("typeList mounted----res:" + res)
				//console.log("this.$refs.collapse:"+this.$refs.collapse)
				if (res.code === 200) {
					this.typeList = res.data.map(item => ({ ...item, isExpanded: false }));
					//this.$refs.collapse.typeList = res.data
					//this.props.push(res.data)
					console.log(this.typeList)
				}
			}).catch((err) => {
				console.log(err)
			})
		},
		methods: {
			toggleItem(item) {
				item.isExpanded = !item.isExpanded;
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.MembershipCode {
		padding-top: 10rpx;
		font-family: 'PingFang SC';
		font-weight: 400;
		letter-spacing: 0px;
		color: #000000;

		.lishang {
			height: 180rpx;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;
			background: linear-gradient(120.2deg, #DEE5F0 1.48%, #C2D3EB 68.39%), linear-gradient(123.71deg, rgba(253, 253, 253, 0.8) 2%, rgba(255, 255, 255, 0) 17.62%);
			margin: 20rpx 30rpx 0 30rpx;
			// box-shadow: inset 0 4px 4px rgba(255, 255, 255, 0.25);
			box-shadow: 0px 4px 4px 0px #FFFFFF40 inset;

			padding: 40rpx;

			.ls_top {
				color: #7487AF;
				font-size: 34rpx;
			}

			.ls_bottom {
				font-family: 'Alimama ShuHeiTi';
				font-weight: 700;
				font-size: 48rpx;
				color: #7487AF;
				// box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.25);
				box-shadow: 1px 1px 0px 0px #FFFFFF40;
				margin-top: 8rpx;
			}
		}

		.vip {
			padding: 30rpx;
			width: 690rpx;
			margin: 20rpx auto 0 auto;
			background: #FFFFFF;
			border-radius: 15rpx;

			.vip_top {
				align-items: center;

				.vt_one {
					.vt_two {
						margin-left: 20rpx;

						.vtt_top {
							font-size: 28rpx;
							color: #222222;
							font-weight: bold;
						}

						.vtt_bottom {
							font-size: 24rpx;
							color: #979797;
						}
					}
				}
			}

			.vip_bottom {
				font-size: 24rpx;
				margin-left: 50rpx;
				line-height: 40rpx;
			}
		}

		.QRCode {
			.qrc_text {
				color: #979797;
				font-size: 20rpx;
			}
		}

		.main-title {
			font-size: 1.2rem;
			font-weight: bold;
			color: rgb(64, 64, 64);
		}

		.sub-title {
			color: rgb(191, 191, 191);
		}

		.collapse-item {
			padding: 10rpx;
		}

		.button {
			background-color: transparent;
			padding: 50rpx 0 30rpx 0;
			place-content: center;
			place-items: center;
		}

		.button button {
			background-color: rgb(15, 76, 151);
			color: white;
			border-radius: 60rpx;
			width: 100%;
		}

		.content text {
			font-size: 10px;
		}

		.box {
			margin: 20rpx;
		}

	}
</style>